<template>
  <div class="store">
    <van-nav-bar
      title="店铺详情"
      left-text="返回"
      left-arrow
      @click-left="goback"
    />
    <div class="store-img">
      <div class="store-img-mask"></div>
    </div>
    <div class="content">
      <div class="content-header">
        <van-row>
          <van-col span="18">
            <p class="title">鱼拿酸菜鱼(武汉江汉路店)</p>
            <p class="desc">
              <span class="score">4.9分</span>
              <van-tag
                color="linear-gradient(to right, #fde7bd, #e3bd7f"
                text-color="#563d24"
                >美团专送</van-tag
              >
              <span class="sel">月销 1000+</span>
              <span class="preson">人均 ￥25</span>
            </p>
          </van-col>
          <van-col span="6">
            <img
              src="https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440"
            />
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="tabs">
      <van-tabs
        title-active-color="black"
        title-inactive-color="slategrey"
        line-width="25"
        line-height="2"
        color="#ffc400"
        shrink
        animated
      >
        <van-tab :title="i.name" v-for="(i, index) in storeData" :key="i.name">
          <MyMain
            :handleAddCart="handleAddCart"
            :index="index"
            :foodData="i.data"
            :addPoint="addBar"
          />
        </van-tab>
      </van-tabs>
      <van-action-bar id="ele_car_icon">
        <van-action-bar-icon
          id="icon-dadge"
          color="#ffffff"
          :badge="counts"
          icon="cart"
        />
        <p class="count-price">
          ￥ {{ countsPrice }}<br /><span>预估配送费 ￥xxx</span>
        </p>
        <van-action-bar-button
          color="linear-gradient(to right, #ffc20e, #fcaf17)"
          text="  去结算"
          @click="toCart"
        />
      </van-action-bar>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive, toRefs, computed } from "vue";
import MyMain from "./main/MyMain";
import { useStore } from "vuex";
import { Toast } from "vant";
export default {
  components: {
    MyMain,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const carList = computed(() => store.state.countAbout.carList);
    let data = reactive({
      title: "鱼拿酸菜鱼",
      img: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
      storeData: [
        {
          name: "点菜",
          data: {
            content: "点菜",
            items: [
              {
                text: "热销套餐",
                children: [
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "招牌酸菜鱼",
                    num: 0,
                    price: 25.0,
                    id: 0,
                    add: true,
                  },
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "藤椒酸菜鱼",
                    num: 0,
                    price: 25.0,
                    id: 1,
                    add: true,
                  },
                ],
              },
              {
                text: "澳洲肥牛",
                children: [
                  {
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21b0ef4f3137f24cac451da80cb91b8&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645407747&t=ea2c9f772ba0df3a2d1b00b962875460",
                    title: "酸汤肥牛",
                    num: 0,
                    price: 25.0,
                    id: 3,
                    add: true,
                  },
                  {
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21b0ef4f3137f24cac451da80cb91b8&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645407747&t=ea2c9f772ba0df3a2d1b00b962875460",
                    title: "香辣肥牛",
                    num: 0,
                    price: 25.0,
                    id: 4,
                    add: true,
                  },
                ],
              },
              {
                text: "超级折扣",
                children: [
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "无骨酸菜鱼+肥牛双拼",
                    num: 0,
                    price: 25.0,
                    id: 5,
                    add: true,
                  },
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "香辣水煮鱼+肥牛双拼",
                    num: 0,
                    price: 25.0,
                    id: 6,
                    add: true,
                  },
                ],
              },
            ],
          },
        },
        { name: "评价", data: { content: "评价" } },
        { name: "商家", data: { content: "商家" } },
      ],
    });
    let counts = computed(() => {
      let count = 0;
      carList.value.forEach((item) => {
        count += item.num;
      });
      return count;
    });
    let countsPrice = computed(() => {
      let countPrice = 0;
      carList.value.forEach((item) => {
        countPrice += item.num * item.price;
      });
      return countPrice;
    });
    const handleAddCart = () => {
      let newList = [];
      data.storeData.forEach((item) => {
        item.data.items?.forEach((items) => {
          items.children.forEach((itemss) => {
            if (itemss.num > 0) {
              newList.push(itemss);
            }
          });
        });
      });
      store.commit("countAbout/ADDCART", newList);
    };
    const toCart = () => {
      if (carList.value.length === 0) {
        Toast("请选择商品");
      } else {
        router.push("./cart");
      }
    };
    const goback = () => {
      router.go(-1);
    };

    return {
      goback,
      ...toRefs(data),
      handleAddCart,
      toCart,
      counts,
      countsPrice,
    };
  },
  methods: {
    addBar(event) {
      let info = event.target.getBoundingClientRect()
      this.createBall01(info.x,info.y);
    },
    createBall01(left, top) {
      let bar = document.createElement("div");
      bar.style.position = "fixed";
      bar.style.left = left + "px";
      bar.style.top = top + "px";
      bar.style.width = "0.533333rem";
      bar.style.height = "0.533333rem";
      bar.style.borderRadius = "50%";
      bar.style.backgroundColor = "red";
      bar.style.transition =
        "left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)";
      let cart = document.getElementById("icon-dadge");
      document.body.appendChild(bar);
      // 添加动画属性
      setTimeout(() => {
        let target = document.getElementById("ele_car_icon");
        let carInfo = target.getBoundingClientRect()
        bar.style.left = carInfo.x + 20 + "px";
        bar.style.top = carInfo.y + "px";
        cart.style.scale = 1.2;
      }, 0);
      setTimeout(() => {
        cart.style.scale = 1.0;
      }, 100);
      /**
       * 动画结束后，删除自己
       */
      bar.ontransitionend = function () {
        this.remove();
      };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tabs__wrap {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
/deep/ .van-tab__text {
  font-size: 14px;
  span {
    font-size: 5px;
    color: slategrey;
  }
}
/deep/ .van-action-bar-icon__icon {
  font-size: 30px;
  margin-top: 5px;
}
.van-action-bar {
  background-color: rgb(29, 28, 28);
  border-radius: 20px;
  margin: 5px 10px;

  overflow: hidden;
  .van-action-bar-icon {
    background-color: rgb(29, 28, 28);
  }
  .van-button {
    border-radius: 0px 20px 20px 0;
    overflow: hidden;
    height: 50px;
    position: relative;
    left: 5px;
    font-weight: 600;
    /deep/ .van-button__text {
      color: black;
      font-size: 15px;
    }
  }
}

.count-price {
  font-size: 20px;
  text-align: left;
  margin-left: 20px;
  margin-right: 50px;
  color: white;
  span {
    font-size: 10px;
  }
}
.store-img {
  background-image: url("https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440");
  height: 150px;
  background-position: center;
  background-size: 100%;
  .store-img-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
}
.content {
  border-radius: 20px;
  background-color: #fff;
  margin-top: -40px;
  .content-header {
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    padding-left: 10px;
    .title {
      margin: 8px 0px;
    }
    .desc {
      font-weight: normal;
      margin: 0;
      padding: 0;
      .score {
        color: #eb6e29;
        font-weight: 600;
      }
      span {
        color: slategrey;
        font-size: 10px;
        margin-right: 5px;
      }
    }
  }
  img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-top: -20px;
  }
}
/deep/ .van-tab {
  margin-right: 20px;
}
</style>